@charset "utf-8";
@function r($px) {
    @return ($px/40) * 1rem;
}

@function half($px) {
    @return ($px/2) * 1px;
}

html,
body {
   
   
    header {
       
        padding: half(17) half(23) half(10);
        .logo {
            img {
                width: half(123);
            }
            a {
                display: inline-block;
                width: 100%;
                height: 100%;
            }
        }
        .searchBar {
            width: r(266);
            height: half(51);
            border: solid 1px #ff9344;
            margin-left: half(40);
            border-radius: half(51);
            margin-top: half(53-17);
            overflow: hidden;
            input[type="search"] {
                width: calc(100% - 38px);
                height: 100%;
                border: none;
                font-size: half(24);
                margin-left: half(24);
                vertical-align: top;
            }
            input[type="image"] {
                height: half(30);
                vertical-align: top;
                margin-top: 5px;
            }
        }
        .selectBar {
            width: half(159);
            height: half(56);
            background-color: #ffffff;
            border: solid 1px #ff9344;
            overflow: hidden;
            background-image: url(../img/triangle.jpg);
            background-size: half(32);
            background-repeat: no-repeat;
            background-position: half(100) half(24);
            margin-top: half(32);
            select {
               width: 100%;
                height: 100%;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                border: none;
                diqplay: block;
                padding-left: half(14);
                background: transparent;
                
            }
        }
    }
    section {
       
        .top_img {
            img {
                width: 100%;
            }
        }
        .tuangou {
            padding: half(10) half(21) half(16);
            >div:first-child {
                
                div {
                    img {
                        display: inline-block;
                        vertical-align: middle;
                        width: r(56);
                    }
                }
                p {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: half(30);
                    letter-spacing: 0px;
                }
            }
            >div:last-child {
                width: 50%;
                margin-top: half(2);
                a {
                    color: #000;
                    p {
                        display: inline-block;
                        vertical-align: middle;
                        font-family: MicrosoftYaHei;
                        font-size: half(24);
                    }
                    .more {
                        display: inline-block;
                        vertical-align: middle;
                        img {
                            width: r(25);
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
        .welfare {
            width: r(750);
            >div {
                width: r(750);
                box-sizing: border-box;
            }
            >div:first-child {
                div {
                    box-sizing: border-box;
                    width: r(375);
                    padding-top: r(16);
                    img {
                        width: r(239);
                    }
                }
                div:first-child {
                    padding-left: r(78);
                }
                div:last-child {
                    padding-right: r(88);
                }
            }
            >div:last-child {
                div {
                    box-sizing: border-box;
                    width: r(375);
                    padding-top: r(16);
                    img {
                        width: r(239);
                    }
                }
                div:first-child {
                    padding-left: r(78);
                }
                div:last-child {
                    padding-right: r(88);
                }
            }
        }
        .heart {
           box-sizing: border-box;
           padding-left: half(21);
            padding-top: r(35);
            width: r(750);
            >div:first-child {
                
                div {
                    img {
                        width: r(55);
                        display: inline-block;
                        vertical-align: middle;
                        
                    }
                }
                p {
                    font-size: half(30);
                    display: inline-block;
                    vertical-align: middle;
                    letter-spacing: 0px;
                }
            }
            >div:last-child {
                a {
                    color: #000;
                    padding-right: r(48);
                    p {
                        display: inline-block;
                        vertical-align: middle;
                        font-family: MicrosoftYaHei;
                        font-size: half(24);
                    }
                    .more {
                        display: inline-block;
                        vertical-align: middle;
                        img {
                            width: r(25);
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
        .food {
            padding: r(33) r(16) r(14);
            .duck {
                padding-top: half(30);
            }
            .sushi,
            .duck {
                div:first-child {
                    img {
                        width: r(211);
                    }
                }
                .describe1 {
                    transform: translateX(half(30));
                    div:first-child {
                        font-size: half(30);
                        line-height: half(53);
                    }
                    div:nth-child(2) {
                        font-size: half(22);
                        color: #494949;
                        line-height: half(53);
                    }
                    div:last-child {
                        font-size: half(32);
                        color: #ff9344;
                        line-height: half(39);
                    }
                }
                .describe2 {
                    div:first-child {
                        font-size: half(22);
                        color: #494949;
                        padding-top: half(9);
                    }
                    div:last-child {
                        font-size: half(22);
                        color: #494949;
                        margin-top: half(69);
                    }
                }
            }
        }
    }
    
}